import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'

// 模拟后台返回数据，进行动态路由配置
let routeConfig = [
  { path: '/', title: '博客首页', exact: true, component: Index },
  { path: '/video/', title: '视频教程', exact: false, component: Video },
  { path: '/workplace/', title: '职场技能', exact: false, component: Workplace }
]
function dynamicRouting() {
  return (
    <Router>
      <ul>
        {
          routeConfig.map(item => {
            return (
              <li>
                <Link to={item.path}>{item.title}</Link>
              </li>
            )
          })
        }
      </ul>
      <div>
        {
          routeConfig.map(item => {
            return (
              <>
                <h2>{item.title}</h2>
                <Route path={item.path} exact={item.exact} component={item.component} />
              </>
            )
          })
        }
      </div>
    </Router>
  )
}

export default dynamicRouting
